<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
        <script src="../../../../CommonTool/commonNetWork.js"></script>
        <script src="../../../../script/jquery.js"></script>
        <script src="../SituationalCoping.js"></script>
        <style>
            /* 图片外框样式 */
            .ImgStyleOne {
                min-width: 70%;
                max-width: 70%;
                margin: 0 auto;
                height: 45vw;
            }
            /* 图片区域与下方按钮的间距 */
            .downBody {
                margin-top: 1%;
            }
            /* 按钮样式：单独一行放在图片下方，不覆盖图片容器 */
            .story-controls {
                text-align: center;
                margin-top: 1rem;
            }
            .story-controls button {
                margin: 0 0.5rem;
                padding: 0.5rem 1.2rem;
                font-size: 1rem;
                line-height: 1.2;
                border: 1px solid #ccc;
                border-radius: 5px;
                background: #f5f5f5;
                cursor: pointer;
                transition: all 0.2s ease;
                box-sizing: border-box;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                white-space: nowrap;
            }
            .story-controls button:hover {
                background: #e0e0e0;
                border-color: #999;
            }
        </style>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav" id="aui-header">
            <div class="aui-pull-left aui-btn" onclick="close_winMain();">
                <span class="aui-iconfont aui-icon-left"></span>返回
            </div>
            <div class="aui-title">场景-高级-情境情绪应对</div>
        </header>
        <!-- 图片显示区域 -->
        <div class="aui-grid downBody">
            <div class="aui-row">
                <div class="aui-col-xs-2"></div>
                <div class="aui-col-xs-8">
                    <div class="ImgStyleOne">
                        <img src="" id="imgOne" alt="" style="width: 100%; height: 100%" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 图片下方控制按钮 -->
        <div class="story-controls">
            <button onclick="prevStory()">上一张</button>
            <button id="pauseBtn" onclick="pauseOrResume()">暂停</button>
            <button onclick="replayAudio()">重播</button>
            <button onclick="nextStory()">下一张</button>
        </div>

        <!-- 页面底部原有功能栏 -->
        <div class="footbar">
            <p class="barLeft" onclick="toggleMenu()">第一关</p>
            <div class="barCenter">
                <div id="InitialButton" style="float: left; margin-left: 4%" onclick="InitialClick()">
                    <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="" />
                </div>
                <div
                    id="InitialButton1"
                    style="float: left; margin-left: 4%; display: none"
                    onclick="ShowInitialClick()"
                >
                    <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="" />
                </div>
                <div id="InitialButton2" style="float: left; margin-left: 3%; display: none">
                    <img
                        style="width: 2rem; height: 1.6rem; margin-top: 12%"
                        src="http://172.16.32.194/commonButton/播放2.png"
                        alt=""
                        onclick="ImgAudioClick()"
                    />
                </div>
                <div id="InitialButton4" style="float: left; margin-left: 4%; display: none">
                    <img
                        style="width: 2rem; height: 2rem; margin-top: 6%"
                        src="http://172.16.32.194/commonButton/刷新1.png"
                        alt=""
                        onclick="ResetClick()"
                    />
                </div>
            </div>
            <p class="barright">
                <img
                    src="http://172.16.32.194/commonButton/回答问题.png"
                    alt=""
                    class="BarBottom"
                    onclick="go_forward();"
                />
            </p>
            <!-- <p class="barright">
                <img
                    src="http://172.16.32.194/commonButton/上一关.png"
                    alt=""
                    class="BarBottom"
                    onclick="next_forward();"
                />
            </p> -->
        </div>
        <!-- <div class="menu" id="menu">
            <div class="menu-item" onclick="goto_page(1)">第一关</div>
            <div class="menu-item" onclick="goto_page(2)">第二关</div>
            <div class="menu-item" onclick="goto_page(3)">第三关</div>
            <div class="menu-item" onclick="goto_page(4)">第四关</div>
            <div class="menu-item" onclick="goto_page(5)">第五关</div>
        </div> -->
    </body>
</html>
<script>
    var token = "";
    var userid = "";
    var currentTimestamp = "";
    var operationName = "";
    var additionalInfo = "";
    var groupId = "";
    var scene = "场景";
    var sceneLevel = "高级";
    var courseType = "情境情绪应对";
    var classSort = "1";
    var moodType = "害怕";
    var remarks = "故事";
    var classType = "泛化";
    var currentAudio = null; // 当前播放的音频对象
    var autoNextTimer = null; // 自动切换定时器
    var isPaused = false; // 是否处于暂停状态
    //     apiready = function() {
    //     ImgAudioClick()
    //     token = api.pageParam.token
    //     userid = api.pageParam.uid
    //     groupId = api.pageParam.groupId;
    //     currentTimestamp = Date.now()
    //     operationName = 'ing'
    //     additionalInfo = ''
    // if (api.pageParam.groupId !== undefined) {
    //             groupId = api.pageParam.groupId;
    //         } else {
    //             InitializeCommonNetWork();
    //         }
    //     };
    // 图片和音频资源
    var images = [
        "http://172.16.32.194/social/advanced/情境情绪应对/test1/1.png",
        "http://172.16.32.194/social/advanced/情境情绪应对/test1/2.png",
        "http://172.16.32.194/social/advanced/情境情绪应对/test1/3.png",
        "http://172.16.32.194/social/advanced/情境情绪应对/test1/4.png",
    ];
    var audios = [
        "http://172.16.32.194/social/advanced/情境情绪应对/test1/1.mp3",
        "http://172.16.32.194/social/advanced/情境情绪应对/test1/2.mp3",
        "http://172.16.32.194/social/advanced/情境情绪应对/test1/3.mp3",
        "http://172.16.32.194/social/advanced/情境情绪应对/test1/4.mp3",
    ];
    var currentIndex = 0; // 当前显示的图片和音频索引

    // 页面加载完成后执行
    apiready = function () {
        token = api.pageParam.token;
        userid = api.pageParam.uid;
        groupId = api.pageParam.groupId;
        currentTimestamp = Date.now();
        operationName = "ing";
        additionalInfo = "";
        if (api.pageParam.groupId !== undefined) {
            groupId = api.pageParam.groupId;
        } else {
            InitializeCommonNetWork();
        }
        playCurrentAudio(); // 加载第一页并播放音频
    };

    // 设置当前图片
    function setImage() {
        document.getElementById("imgOne").src = images[currentIndex];
    }

    // 清除自动切换的定时器
    function clearAutoNext() {
        if (autoNextTimer) {
            clearTimeout(autoNextTimer);
            autoNextTimer = null;
        }
    }

    // 播放当前图片对应的音频
    function playCurrentAudio() {
        clearAutoNext(); // 防止定时器干扰
        if (currentAudio) {
            currentAudio.pause(); // 停止旧音频
            currentAudio = null;
        }
        setImage(); // 显示当前图片
        currentAudio = new Audio(audios[currentIndex]); // 创建新的音频
        isPaused = false;
        document.getElementById("pauseBtn").textContent = "暂停"; // 恢复按钮文字
        currentAudio.play();

        // 音频播放结束后，延迟3秒自动切换到下一张
        currentAudio.onended = function () {
            if (currentIndex < images.length - 1) {
                autoNextTimer = setTimeout(function () {
                    autoNextTimer = null;
                    nextStory();
                }, 3000);
            }
        };
    }

    // 暂停或继续播放
    function pauseOrResume() {
        if (currentAudio && !currentAudio.ended) {
            if (!isPaused && !currentAudio.paused) {
                // 正在播放 → 暂停
                currentAudio.pause();
                isPaused = true;
                document.getElementById("pauseBtn").textContent = "继续";
                clearAutoNext(); // 暂停时取消自动切换
            } else {
                // 暂停状态 → 继续播放
                currentAudio.play();
                isPaused = false;
                document.getElementById("pauseBtn").textContent = "暂停";
            }
        } else {
            // 音频已结束，取消等待中的自动切换
            clearAutoNext();
        }
    }

    // 重播当前音频
    function replayAudio() {
        playCurrentAudio();
    }

    // 切换到上一张
    function prevStory() {
        if (currentIndex > 0) {
            currentIndex--;
            playCurrentAudio();
        }
    }

    // 切换到下一张
    function nextStory() {
        if (currentIndex < images.length - 1) {
            currentIndex++;
            playCurrentAudio();
        }
    }

    // 显示/隐藏菜单
    function go_forward(data) {
        // 离开前清理
        clearAutoNext();
        if (currentAudio) {
            currentAudio.pause();
            currentAudio = null;
        }
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: "Probrem1",
            url: "./Probrem1.html",
            pageParam: { uid: userid, token: token, groupId: groupId },
            reload: true,
        });
    }
    function goto_page(number) {
        const pages = ["test1", "test2", "test3", "test4", "test5"];
        var name = pages[number - 1];
        var url = "../" + name + "/Story1.html";
        if (currentAudio) {
            currentAudio.pause();
            currentAudio = null;
        }
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
</script>
